<style lang='scss' scoped>
  @import './index.scss';
</style>
<template>
  <section class='m-page'>
    <nav-left nav="/wxmanager"/>

    <div class="sub-manager">

      <div class="sub-title">微代理经销员</div>
      <div class="add-btn" @click="openCustomConfrim">+ 新增微代理经销员</div>
      <!-- tab切换的头部 -->
      <div class="sub-tab-wrap">
        <div class="sub-tap-item" :class="{'sub-active': flag}" @click="tab(true)">
          已设置（{{mused.subagent[0] + mused.subagent[1]}}）
          <div class="line"></div>
        </div>
        <div class="sub-tap-item" :class="{'sub-active': !flag}" @click="tab(false)">
          未设置（{{(userInfo.viptime.split(',')[6] - (mused.subagent[0] + mused.subagent[1]))}}）
          <div class="line"></div>
        </div>
      </div>
      <!-- tab切换的头部 -->

      <!-- tab切换内容 -->
      <div class="sub-body" v-if="flag">
        <scroller
          ref="pullrefreshDemo"
          :on-refresh="refresh"
          :on-infinite="infinite">
          <div class="sub-scoller">
            <x-manager-item v-for="(item,index) in agentList" :key="index" :agentItem="item" @click.native="showDetail(index)" isWxProxyComponnent/>
          </div>
        </scroller>
      </div>

      <div class="sub-body" v-else>
        <scroller
          ref="pullrefreshDemo2"
          :on-refresh="refresh2"
          :on-infinite="infinite2">
            <div class="sub-scoller">
              <x-manager-item-2 v-for="i in (userInfo.viptime.split(',')[6] - (mused.subagent[0] + mused.subagent[1]))" :key="i"  @click.native="showSetSubmanager" isWxProxyComponnent/>
            </div>
        </scroller>
      </div>
      <!-- tab切换内容 -->

    </div>

    <!-- 子管理员 -->
    <div class="cnt">
      <router-view></router-view>
    </div>

    <!-- 微代理员数量上限提示 -->
    <x-pop v-if="showPop">
      <div class="pop-box">
        <div class="pop-title">微代理员数量上限提示</div>
        <div class="pop-text">您的商户微代理员数量达到上限，请往购买更多微代理员服务</div>
        <div class="pop-bottom">
          <div class="pop-btn-left" @click="buyone">购买1个</div>
          <div class="pop-btn-right" @click="buymore">批量购买</div>
        </div>
      </div>
    </x-pop>

    <!-- 微信支付弹框 -->
    <x-pop-wrap v-if="show">
      <!-- 购买前 -->
      <div class="box" slot="box" v-if="0">
        <yd-icon name="error" class="close" color="#9B9B9B" size="15px" @click.native="show = false"></yd-icon>
        <div class="head">购买微代理员（10个）</div>
        <div class="qr-code"></div>
        <div class="price">¥950</div>
        <div class="type">使用微信扫码购买</div>
        <div class="bottom">若有付款问题，请联系我们 15325719985</div>
      </div>

      <!-- 购买成功 -->
      <div class="box" slot="box" v-else>
        <yd-icon name="error" class="close" color="#FE3824" size="15px" @click.native="show = false"></yd-icon>
        <div class="success"></div>
        <div class="success-text">支付成功</div>
        <div class="award">恭喜，已获得微代理员（10个）</div>
        <div class="bottom green-18" @click="setSubManager">去设置子管理员</div>
      </div>
    </x-pop-wrap>
  </section>
</template>

<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    data () {
      return {
        flag: true,
        showPop: false,
        show: false,
        page: 1,
        pagesize: 10,
      }
    },

    components: {},
    watch:{
      needRefreshSubAgent(newValue){
        this.$store.state.material.agentList = []
        this.getList()
      }
    },

    computed: {
      ...mapState({
        agentList: state => state.agent.agentList,
        userInfo: state => state.login.userInfo,
        mused: state => state.material.mused,
        needRefreshSubAgent: state => state.needRefreshSubAgent,
      })
    },
    mounted () {
      if (this.$route.path === '/wxmanager/setsub' || this.$route.path === '/wxmanager/authorization') {
        this.flag = false
      } else if (this.$route.path === '/wxmanager/detail') {
        this.flag = true
      }

      this.$store.state.material.agentList = []
      this.getList()

    },
    destroyed () {
    },

    methods: {
      ...mapActions([
        'getAgentList',
        'getAgentInfo'
      ]),
      getList(){
        var params = {
          action:'getrelatelist',
          page: 1,
          pagesize:this.pagesize,
          userid: localStorage.getItem('userid')
        }
        this.getAgentList(params)
          .then(data => {
            if(this.agentList.length > 0){
              this.showDetail(0)
            }
          })
      },
      tab (flag) {
        this.flag = flag
        if (flag) {
          this.$router.replace('/wxmanager/detail')
        } else {
          this.$router.replace('/wxmanager/setsub')
        }
      },
      openCustomConfrim() {
        this.showPop = true
      },
      buyone () {
        this.show = true
      },
      buymore () {

      },
      showDetail (index) {
        this.$router.replace({
          path: '/wxmanager/detail',
          query: {
            id: this.agentList[index].subid
          }
        })
        var params = {
          userid: this.agentList[index].subid,
          action: 'get'
        }
        this.getAgentInfo(params)
      },
      showSetSubmanager () {
        this.$router.replace({
          path: '/wxmanager/setsub',
          query: {
            id: Math.random()
          }
        })
      },
      setSubManager () {
        this.show = false
        this.$nextTick(() => {
          this.showPop = false
        })
        this.tab(false)
      },
      refresh () {
        setTimeout(() => {
          this.$refs.pullrefreshDemo.finishPullToRefresh()
        }, 1000)
      },
      infinite () {
        console.log(1)
        setTimeout(() => {
          this.$refs.pullrefreshDemo.finishInfinite(true)
        }, 1000)
      },
      refresh2 () {
        setTimeout(() => {
          this.$refs.pullrefreshDemo2.finishPullToRefresh()
        }, 1000)
      },
      infinite2 () {
        console.log(2)
        setTimeout(() => {
          this.$refs.pullrefreshDemo2.finishInfinite(true)
        }, 1000)
      }
    }
  }

</script>
 <style lang="scss">
    .x-select{
        width: 100%; height: 50px;
        margin-bottom: 30px;
        input{
           height: 50px;
           border-radius: 0!important;
           border-color: #c8c7cc!important;
        }
        .el-select-dropdown__item{
            height: 50px; line-height: 50px;
        }
    }
    .x-select.el-select .el-input.is-focus .el-input__inner {
        border-color: #c8c7cc;
    }

    .x-select.el-select .el-input__inner:focus{
        border-color: #c8c7cc;
    }
 </style>
